import React, { createContext, useState } from 'react';
import { Alert, Button, Dimensions, SafeAreaView, StatusBar, StyleSheet, Switch, Text, View, SectionList } from 'react-native';
import { getStatusBarHeight } from 'react-native-status-bar-height';

//分组效果的列表
const SectionlistPage = () => {

    const [stateBarheight, setStateBarheight] = useState(0)
    const [isRefresh, setIsRefresh] = useState(false)

    const loadData = () => {
        setIsRefresh(true)

        setStateBarheight(getStatusBarHeight())

        /* 模拟请求数据 */
        setTimeout(() => {
            setIsRefresh(false)
            Alert.alert('下拉刷新' + stateBarheight)
        }, 2000)

    }

    const DATA = [
        {
            title: '魏国',
            data: ['曹操', '司马懿', '张辽'],
        },
        {
            title: '蜀国',
            data: ['刘备', '张飞', '关羽'],
        },
        {
            title: '中国',
            data: ['北京', '上海', '深圳', '广州'],
        },
        {
            title: '台湾省',
            data: ['台北市', '高雄市'],
        },
    ];

    return (
        <View style={[styles.root]}>
            <SafeAreaView
                style={{ marginHorizontal: 16 }}>     {/* 适配IOS刘海屏 */}
                <SectionList

                    style={{
                        height: Dimensions.get('window').height - stateBarheight
                    }}

                    /* 赋值数据 */
                    sections={DATA}

                    /* 唯一索引 */
                    keyExtractor={(item, index) => item + index}

                    /* 渲染ITEM */
                    renderItem={({ item }) => (
                        <View style={styles.item}>                  {/* ITEM布局 */}
                            <Text style={styles.title}>{item}</Text>
                        </View>
                    )}

                    /* 分组的头 */
                    renderSectionHeader={({ section: { title } }) => (
                        <Text style={styles.header}>{title}</Text>
                    )}

                    /* 声明项目之间的分隔符 */
                    ItemSeparatorComponent={() => {
                        return <View style={{ backgroundColor: "#999999", height: 1 }}></View>;
                    }}

                    /* 空页面显示 */
                    ListEmptyComponent={() => {
                        return <View><Text>空空如也</Text></View>
                    }}

                    /* 下拉刷新 */
                    refreshing={isRefresh}
                    onRefresh={() => {
                        loadData()
                    }}

                    /* 上拉加载 */
                    onEndReachedThreshold={0.5} /* 声明触底的比率，开始执行加载 */
                    onEndReached={() => {
                        /* 触底之后要执行的操作 */
                        Alert.alert('到底了')
                    }}


                    /* 声明列表的头布局 */
                    ListHeaderComponent={() => {
                        return <View><Text>三国英雄榜</Text></View>
                    }}

                    /* 声明列表的尾布局 */
                    ListFooterComponent={() => {
                        return <View><Text>声明列表的尾布局</Text></View>
                    }}

                />
            </SafeAreaView>

        </View>
    );
};

const styles = StyleSheet.create({
    root: {
        justifyContent: "center",
    },
    item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
    },
    header: {
        fontSize: 32,
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 24,
    },
})

export default SectionlistPage;
